<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>分发服务器实时监控</title>
        <link href="css/main.css" type="text/css" rel="stylesheet"/>
    </head>

    <body>
        <!--地图-->
        <div class="timer title">分发服务器实时监控</div>
        <div class="map">
            <div id="map" style="width:100%; height:100%;"></div>
        </div>
        <div class="total">
            <div style="float:left;">
                <div class="yesterday">昨天总共请求次数：</div>
                <div class="yesterday timer" id="yesterday">
                    <div class="load">loading
                        <div  class="marginLeft">
                            <div id="circle_1" class="circle"></div>
                            <div id="circle_2" class="circle"></div>
                            <div id="circle_3" class="circle"></div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <br/>
            <br/>
            <div style="float:left;">
                <div class="today">今天到目前共请求次数：</div>
                <div id="todayTotal" class="today timer">
                    <div class="load">loading
                        <div  class="marginLeft">
                            <div id="circle_1" class="circle"></div>
                            <div id="circle_2" class="circle"></div>
                            <div id="circle_3" class="circle"></div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="detailed">
            <div class="details">详细日志</div>
            <table cellpadding="0" cellspacing="0" border="0">
                <thead style="max-height: 29px;">
                <th style="width: 15%">客户端IP</th>
                <th style="width: 25%">TIMESTAMP</th>
                <th style="width: 25%">LOCATION</th>
                <th style="width: 20%">CITY</th>
                <th style="width: 15%">分发节点</th>
                </thead>
            </table>
            <ul class="detailed_list">
                <li class="load">
                    <span>loading</span>
                    <span  class="marginLeft">
                        <strong id="circle_1" class="circle"></strong>
                        <strong id="circle_2" class="circle"></strong>
                        <strong id="circle_3" class="circle"></strong>
                        <strong class="clearfix"></strong>
                    </span>
                </li>
            </ul>
        </div>
        <div class="tab-container SERVER">
            <div class="tab-header">热门节点</div>
            <div id="tabContainer" class="tab-content">
                <ul class="server_list" id="server_list">
                    <li class="load">
                        <div>loading</div>
                        <div  class="marginLeft">
                            <div id="circle_1" class="circle"></div>
                            <div id="circle_2" class="circle"></div>
                            <div id="circle_3" class="circle"></div>
                            <div class="clearfix"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-container customer">
            <div class="tab-header">热门城市</div>
            <ul class="server_list present" id="present">
                <li class="load">
                    <div>loading</div>
                    <div  class="marginLeft">
                        <div id="circle_1" class="circle"></div>
                        <div id="circle_2" class="circle"></div>
                        <div id="circle_3" class="circle"></div>
                        <div class="clearfix"></div>
                    </div>
                </li>
            </ul>
        </div>
        <p style="position:fixed; top:2.5%; right: 2%; color: #fff;">友情链接 :<a style="color: #fff;" target="_blank" href="http://m.kuaidi100.com">快递查询</a></p>
        <script src="js/jquery-1.7.2.js" type="text/javascript"></script> 
        <script src="js/echarts-all.js"></script>
        <!--世界地图--> 
        <script type="text/javascript" src="js/GetData.js"></script> 
        <script type="text/javascript" src="js/ShowMap.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                GetData.init();
            });
        </script>
    </body>
</html>
